<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="于浩">
    <title>轮播图</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #myCarousel{
            background-color: orange;
            width: 500px;
            margin: 100px auto;
        }    
    </style>
</head>

<body>
    <!--定义一个轮播图
        carousel: 轮播图
        slide: 滑动
        -->
    <div id="myCarousel" class="carousel slide" >
        <!--carousel-indicators定义一个轮播的指示器.-->
        <ol class="carousel-indicators">
            <!--data-target指示器点击时定位到的图片id
                data-slide-to指示器点击时定位到的编号, 默认从0开始.-->
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="item active">
                <img src="1.jpg" alt="First slide">
            </div>
            <div class="item">
                <img src="2.jpg" alt="Second slide">
            </div>
            <div class="item">
                <img src="3.jpg" alt="Third slide">
            </div>

        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
	    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
     

    </div>










    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

</html>